<!DOCTYPE html>
<html>
<head>
    <include file="Common/head"/>

    <style>
        .glyphicon{
            font-size: 16px;
            cursor: pointer;
        }
        input{
            margin-right: 20px;
            width: 100px;
        }
        select{
            margin-right: 20px;
        }
        .menu_box{
            padding: 20px 0 20px 0;
        }
        #menu_set{
            -moz-user-select:none;

            -webkit-user-select:none;

            user-select:none;
        }
        .main_menu .main_attr input:last-child{
            width: 250px;
        }
        .sub_menu input:last-child{
            width: 250px;
        }
        .tab-sign{
            display: inline-block;
            margin-left: 15px;
            height: 21px;
            vertical-align: middle;
            background-image: url("__IMG__/tab_sign3.png?{:rand()}");
            background-repeat: no-repeat;
    
            height: 36px;
            width: 40px;
            background-position: 0 0;
        }
        .menu_box .sub_menu:last-child .tab-sign{
            background-position: -55px 0;
        }


    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>自定义菜单 <small></small></h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <volist name="wechat" id="v" key="k">
                                <li><a href="{:U('Wechat/menu/id/'.$v['id'])}">{$v.name}</a></li>
                            </volist>
                        </ul>
                    </div>
                </div>

                <div class="ibox-content">
                    <include file="Common/alert"/>
    
                    <div class="clearfix" style="width:100%;">
                        <div class="bars pull-left"><div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                            <button class="btn btn-default btn-outline" type="button" name="refresh" title="刷新" href="__SELF__"><i class="glyphicon glyphicon-repeat" style="line-height: 19px;"></i></button>
                        </div></div>
                    </div>
                    
                    <form id="menu_set"     class="form-horizontal" action="__SELF__" method="post" >
                        <div style="height: 40px;line-height: 40px"><label>增加主菜单 </label><span id="add_menu" class="glyphicon glyphicon-plus-sign" title="增加主菜单" style="height: 40px;line-height: 40px"></span></div>

                        <notempty name="menu">
                            <volist name="menu" id="v" key="k">
                                <div class="menu_box" data-main-id="{$k}">
                                    <div class="main_menu">
                                        <span class="del_main glyphicon glyphicon-minus-sign" title="删除主菜单"></span><label>名称：</label><input class="name" name="menu[button][{$k}][name]" type="text" value="{$v.name}">

                                        <empty name="v['sub_button']">
                                            <div class="main_attr" style="display:inline">
                                                <label>类型：</label>
                                                <select class="type" name="menu[button][{$k}][type]">
                                                    <volist name="type_list" id="vo"><option value="{$key}"  <if condition="$v.type eq $key">selected="selected"</if> >{$vo.1}</option></volist>
                                                </select>
                                                <label>值：</label><input class="key" name="menu[button][{$k}][<if condition="($v.type eq 'view')">url]" value="{$v.url}"<elseif condition="($v.type eq 'media_id')OR($v.type eq 'limited_id')"/>media_id]" value="{$v.media_id}"<else />key]" value="{$v.key}"</if>>
                                            </div>
                                        </empty>
                                        <span class="add_sub glyphicon glyphicon-plus-sign" title="增加子菜单"></span>
                                    </div>
                                    <notempty name="v['sub_button']">
                                        <volist name="v['sub_button']" key="k_sub" id="v_sub">

                                            <div class="sub_menu" data-sub-id="{$k_sub}">
                                                <span class="tab-sign"></span>
                                                <span class="del_sub glyphicon glyphicon-minus-sign" title="删除子菜单"></span><label>名称：</label><input class="name" name="menu[button][{$k}][sub_button][{$k_sub}][name]" type="text" value="{$v_sub.name}"><label>类型：</label>
                                                <select class="type" name="menu[button][{$k}][sub_button][{$k_sub}][type]">
                                                    <volist name="type_list" id="vo"><option value="{$key}"  <if condition="$v_sub.type eq $key">selected="selected"</if> >{$vo.1}</option></volist>
                                                </select>
                                                <label>值：</label><input class="key" name="menu[button][{$k}][sub_button][{$k_sub}][<if condition="($v_sub.type eq 'view')">url]" value="{$v_sub.url}"<elseif condition="($v_sub.type eq 'media_id')OR($v_sub.type eq 'limited_id')"/>media_id]" value="{$v_sub.media_id}"<else />key]" value="{$v_sub.key}"</if> >
                                            </div>

                                        </volist>
                                    </notempty>
                                </div>
                            </volist>
                        </notempty>
    
                                <button class="submit_button btn btn-primary" type="submit">保存</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<include file="Common/footer"/>

<script>
    var input_id = 0;
    var option_text = '<volist name="type_list" id="vo"><option value="{$key}">{$vo.1}</option></volist>';
    $(document).ready(function(){
        //增加主菜单
        $("body").on('click',"#add_menu",function(){
            console.log("增加一级菜单");
            var main_length = $(".menu_box").length;
            console.log('主菜单已有'+main_length+'级');
            console.log(length);
            if(main_length<=2){
                $(".submit_button").before('<div class="menu_box" data-main-id="'+ input_id +'"><div class="main_menu"><span class="del_main glyphicon glyphicon-minus-sign" title="删除主菜单"></span><label>名称：</label><input class="name" name="menu[button]['+ input_id +'][name]" type="text"><div class="main_attr" style="display:inline"><label>类型：</label><select class="type" name="menu[button]['+ input_id +'][type]">' + option_text + '</select><label>值：</label><input class="key" name="menu[button]['+ input_id +'][key]"></div><span class="add_sub glyphicon glyphicon-plus-sign" title="增加子菜单"></span></div></div>');
            }
            input_id++;
        });
        //删除主菜单
        $("body").on('click',".del_main",function(){
            console.log('删除子菜单');
            $(this).parent().parent().remove();
        });

        //增加子菜单
        $("body").on('click',".add_sub",function(){
            console.log();
            var sub_length = $(this).parent().parent().children(".sub_menu").length;
            console.log('即将增加子菜单，当前子菜单数量：' + length + '  增加后数量：' + (length+1));
            if(sub_length <=4){
                //disabled key value input
                $(this).siblings(".main_attr").find(".type").attr("disabled", true);
                $(this).siblings(".main_attr").find(".key").attr("disabled", true);
                $(this).siblings(".main_attr").find(".value").attr("disabled", true);
                $(this).siblings(".main_attr").hide();
                console.log('主菜单键值属性表单失效并隐藏');
                var main_id = $(this).parent().parent().data('main-id');
                var sub_id = input_id;
                $(this).parent().parent().append('<div class="sub_menu" data-sub-id="' + sub_id + '"><span class="tab-sign"></span><span class="del_sub glyphicon glyphicon-minus-sign" title="删除子菜单"></span><label>名称：</label><input class="name" name="menu[button]['+ main_id +'][sub_button]['+ sub_id +'][name]" type="text"><label>类型：</label><select class="type" name="menu[button]['+ main_id +'][sub_button]['+ sub_id +'][type]">'+ option_text +'</select><label>值：</label><input class="key" name="menu[button]['+ main_id +'][sub_button]['+ sub_id +'][key]"></div>');
                input_id++;
            }
        });

        //删除子菜单
        $("body").on('click',".del_sub",function(){
            console.log();

            var sub_length = $(this).parent().parent().children(".sub_menu").length;
            console.log('删除子菜单,删除前的子菜单数量为：' + sub_length);
            if(sub_length == 1){
                $(this).parent().parent().children(".main_menu").children(".main_attr").find(".type").removeAttr("disabled");
                $(this).parent().parent().children(".main_menu").children(".main_attr").find(".key").removeAttr("disabled");
                $(this).parent().parent().children(".main_menu").children(".main_attr").find(".value").removeAttr("disabled");
                $(this).parent().parent().children(".main_menu").children(".main_attr").show();
            }
            $(this).parent().remove();
            console.log('删除子菜单,删除后的子菜单数量为：' + (sub_length-1));
        });

        //type选择事件
        $("body").on('change','select',function(){
            var key;
            switch($(this).val()){
                case 'click':
                case 'scancode_push':
                case 'scancode_waitmsg':
                case 'pic_weixin':
                case 'pic_sysphoto':
                case 'pic_photo_or_album':
                case 'location_select':
                    key = 'key';
                    break;
                case 'view':
                    key = 'url';
                    break;
                case 'media_id':
                case 'view_limited':
                    key = 'media_id';
                    break;
            }
            var name = $(this).siblings(".key").attr('name').replace(/key|url|media_id/g,key);
            console.log(  '当前select值为：' + $(this).val() + '  ' + name );
            $(this).siblings(".key").attr('name',name);
        });
    });
</script>

</body>
</html>
